<template>
    <div class="order-detail-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                订单详情

            </template>
        </nav-bar>
        <div class="order-status">
            <div class="status-item">
                <label>订单状态：</label>
                <span>{{ statusString }}</span>
            </div>
            <div class="status-item">
                <label>订单编号：</label>
                <span>{{ detail.order_no }}</span>
            </div>
            <div class="status-item">
                <label>订单时间：</label>
                <span>{{ detail.created_at }}</span>
            </div>
            <van-button v-if="detail.status == 1" @click="showPayFn" style="margin-bottom: 10px; color: #1baeae; block">
            去支付
            </van-button>
            <van-button v-if="detail.status == 2" @click="sendGoods" block>
            催化货
            </van-button>
            <van-button v-if="detail.status == 1" @click="handleConfirmOrder" block>
            确认订单
            </van-button>
            <div class="order-price">
                <div class="price-item">
                    <label>商品金额</label>
                   <span>￥{{ detail.amount + '.00' }}</span>
                
                </div>
                <div class="price-item">
                    <label>背诵方案</label>
                    <span>普通快递</span>
                </div>
            </div>
            <!-- 商品卡片 -->
                <van-card
                v-for="item in detail.orderDetails.data" :key="item.id"
                :num="item.num"
                :price="item.price+'.00'"
                desc="全场包邮"
                :title="item.goods.title"
                :thumb="item.goods.cover_url"
                @click="itemClick(item.goods.id)"
                />
                <!-- 弹出层 -->
                <van-popup 
                    closeable
                    :close-on-click-overlay="false"
                    v-model:show="showPay"
                    :style="{height: '40%'}"
                >
                <h3 class="zifhu">选择支付方式</h3>
                <!-- 单选框群 -->
                <van-radio-group v-model="checked">
                    <van-cell-group inset>
                        <van-cell title="微信支付" clickable @click="checked = '1'" >
                        <template #icon>
                            <van-icon name="wxicon"  class="iconw"/>
                        </template>
                        <template #right-icon>
                            <van-radio name="1" />
                        </template>
                       </van-cell>
                       <van-cell title="支付宝支付" clickable @click="checked = '2'" >
                        <template #icon>
                            <van-icon name="zfbicon"  class="iconw"/>
                        </template>
                        <template #right-icon>
                            <van-radio name="2" />
                        </template>
                       </van-cell>
                    </van-cell-group>
                </van-radio-group>
                <van-button @click="topay(checked)" style="width:100%;" type="danger">
                    <span>{{ checked=='1' ? '使用微信支付':'使用支付宝支付' }}</span>
                </van-button>
                </van-popup>
        </div>
    </div>
</template>
<style>
.order-detail-box{
    text-align: left;
    background: #f7f7ff;
}
.order-status{
    background:#fff;
    margin-top: 44px;
    padding:20px;
    font-size: 15px;
}
.status-item{
    margin-bottom:10px;
}
label{
    color:#999;
}
.order-price{
    background:#fff;
    margin:20px 0;
    padding:20xp;
    font-size: 15px;
}
.van-card{
    margin-top: 0;
}
.van-card__content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
h3{
    font-size: 14px;
    padding:15px;
    margin-top: 10px;
    text-align: center;
}
.van-radio-group{
    margin-top: 10px;
    text-align: center;
}
.van-icon__image{
    width: 25px;
    height: 25x;
}
</style>
<script>
import { ref,reactive,toRefs,onMounted,computed } from 'vue';
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { getOrderDetail,confirmOrder,payOrderStatus } from '@/network/order';
import { Dialog,Toast } from 'vant';
import { useRoute,useRouter } from 'vue-router';
export default({
    name:'OrderDetail',
    components:{
        NavBar
    },
    setup(){
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            orderNo:'',//订单
            
            detail:{
                orderDetails:{
                    data:[]
                },
                status:0
            },
          
            showPay:false,
            wxicon:require('@/assets/images/wx.jpg'),
            zfbicon:require('@/assets/images/zfb.jpg'),
        })
      
        const checked = ref('1');
        
        const init=()=>{
            const {id} = route.query;
            state.orderNo = id;
            getOrderDetail(id).then(res=>{
                console.log(res);
                state.detail = res;
            })
        }
        onMounted(()=>{
            Toast.loading({message:'加载中...',forbidClick:true});
            init();
            Toast.clear();

        })
        const statusString = computed(()=>{
            // 1下单 2支付 3发货 4收获 5过期
            let status = ['', '已下单', '已支付','等待发货','确认收获','已过期'];
            return status[state.detail.status];
        })
       
        const showPayFn=()=>{
            state.showPay=true;
            // 轮旭查看
            const timer = setInterval(()=>{
                payOrderStatus(state.orderNo).then(res=>{
                    console.log(res);
                    if(res == '2'){
                        clearInterval(timer);
                        state.showPay = false;
                        router.push({path:'/orderdetail',query:{id:state.orderNo}})
                    }
                })
            },2000)
        }
        const handleConfirmOrder = ()=>{
            Dialog.confirm({
                title:'是否确认订单'
            }).then(()=>{
                confirmOrder(state.orderNo).then(res=>{
                    console.log(res);
                
                    Toast('确认成功');
                    init();
                })
            }).catch(()=>{

            })
        }
        const sendGoods=()=>{
            Dialog.alert({
                message:'收到，马上安排'
            }).then(()=>{})
        }
        const topay=(checked)=>{
            let types = ['','wechat','aliyun']
            router.push({path:'/paytest',query:{type:types[checked],orderid:state.orderNo}});
        }
        return{
            ...toRefs(state),
            statusString,
            handleConfirmOrder,
            sendGoods,
            topay,
            showPayFn,
            checked,
            init,
            itemClick:(id)=>{
                router.push({path:'/detail',query:{id,id}})
            }
        }
    }
})
</script> 



<!-- status装态 -->